<template>
	<el-row :gutter="10" class="DBContentRow" type="flex">
		<el-col :span="4" :xl="3" class="textDBBox" style="display: none">
			<div class="gradientBox">
				<p class="titleText">数据库实例</p>
				<div class="showTextBtnBox">
					<i class="el-icon-s-grid" :class="{ showMode: showTextMode == 'icon' }"
						@click="showText('icon')"></i>
					<i class="el-icon-more" :class="{ showMode: showTextMode == 'text' }" @click="showText('text')"></i>
				</div>
				<v-TextDatabace @clickMonID="getclickMonID"></v-TextDatabace>
			</div>
		</el-col>
		<el-col :span="24" :xl="24" class="DBMainBox">
			<el-row :gutter="10" class="TopRow">
				<el-col :span="6" class="firstColumn-Box">
					<div class="gradientBox">
						<p class="titleText">基本信息</p>
						<vHostInformation></vHostInformation>
					</div>
					<div class="gradientBox">
						<p class="titleText">内存信息</p>
						<vMemoryInformation></vMemoryInformation>
					</div>
					<div class="gradientBox">
						<p class="titleText">数据库信息</p>
						<vDataBaseImformation></vDataBaseImformation>
					</div>
				</el-col>
				<el-col :span="7" class="secondColumn-Box">
					<div class="gradientBox">
						<p class="titleText">DB负载</p>
						<vDbAndIo></vDbAndIo>
					</div>
					<div class="gradientBox">
						<p class="titleText">IO</p>
						<vIoWait></vIoWait>
					</div>
					<div class="gradientBox">
						<p class="titleText">归档频率</p>
						<vGcWait></vGcWait>
					</div>
				</el-col>
				<el-col :span="11" class="thirdColumn-Box">
					<div class="gradientBox">
						<p class="titleText">表空间信息</p>
						<vTableImformation></vTableImformation>
					</div>
					<div class="gradientBox">
						<p class="titleText">文件系统信息</p>
						<vFileImformation></vFileImformation>
					</div>
					<div class="gradientBox">
						<p class="titleText">磁盘组信息</p>
						<vDiskImformation></vDiskImformation>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="DownRow">
				<el-col :span="6" class="DownFirst-Box">
					<div class="gradientBox">
						<p class="titleText">Top 5</p>
						<vTopFive></vTopFive>
					</div>
				</el-col>
				<el-col :span="18" class="DownSecondt-Box">
					<div class="gradientBox">
						<p class="titleText">告警日志</p>
						<vAlarmLog></vAlarmLog>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import vTextDatabace from "./TextDatabace.vue";
	import vHostInformation from "./HostInformation.vue";
	import vMemoryInformation from "./MemoryInformation.vue";
	import vDataBaseImformation from "./DataBaseImformation.vue";
	import vTableImformation from "./TableImformation.vue";
	import vDiskImformation from "./DiskImformation.vue";
	import vFileImformation from "./FileImformation.vue";
	import vDbAndIo from "./DbAndIo.vue";
	import vIoWait from "./IoWait.vue";
	import vGcWait from "./GcWait.vue";
	import vTopFive from "./TopFive.vue";
	import vAlarmLog from "./AlarmLog.vue";

	export default {
		beforeRouteEnter(to, from, next) {
			// if (from.path != "/NodeUsability") {
			//   next("/NodeUsability");
			// }
			next();
		},

		components: {
			vTextDatabace,
			vHostInformation,
			vMemoryInformation,
			vDataBaseImformation,
			vTableImformation,
			vDiskImformation,
			vFileImformation,
			vDbAndIo,
			vIoWait,
			vGcWait,
			vTopFive,
			vAlarmLog,
		},
		data() {
			return {
				postData: {
					opera: "dbConnect",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				ipData: [],
				selectIPVisible: false,
				selectedMonID: {},
				showTextMode: "icon",
			};
		},
		created() {},
		methods: {
			selectIP() {
				fetchData({
					postData: JSON.stringify(this.postData),
				}).then((res) => {
					this.ipData = res;
				});

				this.selectIPVisible = true;
			},
			getclickMonID(val) {
				this.selectedMonID = val;
				bus.$emit("selectedMonID", this.selectedMonID);
			},
			showText(val) {
				switch (val) {
					case "icon":
						this.showTextMode = "icon";
						bus.$emit("showText", "icon");
						break;
					case "text":
						this.showTextMode = "text";
						bus.$emit("showText", "text");
						break;

					default:
						break;
				}
			},
		},
		beforeDestroy() {},
	};
</script>

<style scoped>
	.DBContentRow {
		height: 100%;
		color: aliceblue;
		min-height: 896px;
		overflow-y: scroll;
	}

	/* 数据库列表 */
	.textDBBox .gradientBox {
		max-height: calc(100% - 7px * 2);
	}

	.DBMainBox .TopRow {
		height: 80%;
		margin-bottom: 10px;
	}

	.DBMainBox .DownRow {
		height: calc(20% - 10px);
	}

	.TopRow>div {
		height: 100%;
	}

	/* 主机、内存、数据库信息 */
	.firstColumn-Box .gradientBox {
		height: calc(100% / 3 - 7px * 2 - 20px / 3);
	}

	/* DB、IO、归档频率 */
	.secondColumn-Box .gradientBox {
		height: calc(100% / 3 - 7px * 2 - 20px / 3);
	}

	/* 表空间、文件系统、磁盘组信息 */
	.thirdColumn-Box .gradientBox {
		height: calc(100% / 3 - 7px * 2 - 20px / 3);
	}

	.DownRow>div {
		height: 100%;
	}

	.DownFirst-Box .gradientBox {
		height: calc(100% - 7px * 2);
	}

	.DownSecondt-Box .gradientBox {
		height: calc(100% - 7px * 2);
	}

	.gradientBox {
		position: relative;
		padding: 7px 10px;
		margin-bottom: 10px;
		overflow: hidden;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0px 0px 24px rgb(1, 40, 107) inset !important;
	}

	.gradientBox:last-child {
		margin-bottom: 0;
	}

	.titleText {
		width: 60%;
		margin: 0 auto 8px auto;
		border-radius: 20px;
		box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
		line-height: 22px;
	}

	.showTextBtnBox {
		position: absolute;
		top: 10px;
		right: 0;
		padding-right: 3px;
	}

	.showTextBtnBox i {
		margin-right: 3px;
		cursor: pointer;
	}

	.showTextBtnBox i.showMode {
		color: #67c23a;
	}
</style>
